<!DOCTYPE html>
<html>
<head>
   <title>规格</title>
   <meta charset="utf8"/>
   <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
   <style type="text/css">
      body {
         background: #433535;
         color: #FFFFFF;
      }

      .item {
         padding: 5px;
         font-style: 16px;

      }

      .label {
         display: inline-block;
      }

      .children {
         display: inline-block;
         padding: 5px 10px;
         font-size: 12px;
         margin-left: 20px;
         border: 1px solid #f4f4f4;
         width: 30px;
         text-align: center;
         cursor: pointer;
      }

      .children.active {
         background: yellowgreen;
      }

      .children.disabled {
         background: #999;
         border-color: #999;
         color: #666;
         cursor: auto;
      }
   </style>
</head>
<body>
<!--active-->
<div id="app">
   <div class="list">
      <div v-for="(item,index) in dataList" class="item">
         <div class="label">{{item.name}}:</div>
         <div v-for="(citem,cindex) in item.children"
              :class="citem.checked?'active':(citem.is_show?'':'disabled')"
              class="children"
              @click="selectActive(index,cindex,item,citem)">
            {{citem.id}}
         </div>
      </div>
   </div>
</div>
<script type="text/javascript">
   var vm = new Vue({
      el: "#app",
      data: {
         specs: [
            {
               ids: "2,11,21,33",
               price: "45.20"
            },
            {
               ids: "2,11,22,33",
               price: "45.20"
            },
            {
               ids: "2,11,23,33",
               price: "45.20"
            },
            {
               ids: "2,11,24,33",
               price: "46.20"
            },
            {
               ids: "2,12,25,31",
               price: "46.20"
            }
         ],
         dataList: [
            {
               name: "颜色",
               children: [{
                  id: "1",
                  name: "白色",
                  checked: false,
                  is_show: true
               }, {
                  id: '2',
                  name: "黑色",
                  checked: false,
                  is_show: true
               }, {
                  id: '3',
                  name: "蓝色",
                  checked: false,
                  is_show: true
               }, {
                  id: '4',
                  name: "橙色",
                  checked: false,
                  is_show: true
               }]
            },
            {
               name: "尺码",
               children: [{
                  id: '11',
                  name: "M",
                  checked: false,
                  is_show: true
               }, {
                  id: '12',
                  name: "L",
                  checked: false,
                  is_show: true
               }, {
                  id: '13',
                  name: "XL",
                  checked: false,
                  is_show: true
               }, {
                  id: '14',
                  name: "XXL",
                  checked: false,
                  is_show: true
               }, {
                  id: '15',
                  name: "XXXL",
                  checked: false,
                  is_show: true
               }]
            },
            {
               name: "编号",
               children: [{
                  id: '21',
                  name: "001",
                  checked: false,
                  is_show: true
               }, {
                  id: '22',
                  name: "002",
                  checked: false,
                  is_show: true
               }, {
                  id: '23',
                  name: "003",
                  checked: false,
                  is_show: true
               }, {
                  id: '24',
                  name: "004",
                  checked: false,
                  is_show: true
               }, {
                  id: '25',
                  name: "005",
                  checked: false,
                  is_show: true
               }, {
                  id: '26',
                  name: "006",
                  checked: false,
                  is_show: true
               }]
            },
            {
               name: "地址",
               children: [{
                  id: '31',
                  name: "宜宾",
                  checked: false,
                  is_show: true
               },{
                  id: '32',
                  name: "自贡",
                  checked: false,
                  is_show: true
               },{
                  id: '33',
                  name: "成都",
                  checked: false,
                  is_show: true
               },{
                  id: '34',
                  name: "泸州",
                  checked: false,
                  is_show: true
               }]
            }
         ],
         select_ids: "",//已选中的id集合
      },
      mounted() {
         let dataList = this.dataList,
            select_ids = [];
         dataList.forEach(item => {
            select_ids.push("");
         });
         this.select_ids = select_ids;
         dataList = this.select_specs(select_ids);
         this.dataList = dataList;
      },
      methods: {
         selectActive(index, cindex, item, citem) {
            let specs = this.specs,
               select_ids = this.select_ids,
               dataList = this.dataList;
            if (!citem.is_show) return;

            select_ids = this.select_ids_change(index, citem.id); /**选择和反选*/
            dataList = this.select_specs(select_ids,index);/**已选择的情况以及启用和禁用的判断组合*/

            this.select_ids = select_ids;
            this.dataList = dataList;
         },

         // 已选择的情况以及启用和禁用的判断组合
         select_specs(select_ids) {
            let specs = JSON.parse(JSON.stringify(this.specs)),
               dataList = JSON.parse(JSON.stringify(this.dataList));

            let specs_existing_ids = [];/**存储所有能组合的情况*/

            dataList.forEach((item, index) => { /**将数据恢复到最初的状态*/
               item.children.forEach((citem, cindex) => {
                  citem.is_show = false;
                  citem.checked = false;
               });
            });

            select_ids.forEach((select_id,select_index) => { /**设置选中的状态*/
               dataList[select_index].children.forEach((kitem,kindex) => {
                  if(kitem.id == select_id){
                     kitem.checked = true;
                  }
               });
            });

            specs.forEach((item, index) => { /*存储所有能组合的情况*/
               let ids_arr = item.ids.split(",");
               let boole = true;
               for (let i = 0; i < select_ids.length; i++) {
                  if (select_ids[i]) {
                     if (select_ids[i] != ids_arr[i]) {
                        boole = false;
                        break;
                     }
                  }
               }
               if (boole) {
                  specs_existing_ids.push(item);
               }
            });

            /**判断处理*/
            specs_existing_ids.forEach((item, index) => {
               let group_ids = (item.ids).split(",");
               group_ids.forEach((group_id, group_index) => {
                  dataList[group_index].children.forEach((kitem,kindex) => {
                     if(kitem.id == group_id){
                        kitem.is_show = true;
                     }
                  });
               });
            });

            return dataList;
         },

         // 选择和反选
         select_ids_change(index, select_id) {
            let select_ids = JSON.parse(JSON.stringify(this.select_ids));
            if (select_ids[index] == select_id) {
               select_ids[index] = "";
            } else {
               select_ids[index] = select_id;
            }
            return select_ids;
         }
      }
   })


</script>
</body>
</html>